<template>
    <div>
        <!-- <div>
            <div>
				<el-button type="primary" @click="callPayPut(0)" size="mini">保存</el-button>
                <el-button  @click="callPayPut(1)" size="mini">{{ttype==1?'付款':'收款'}}结算</el-button>
            </div>
        </div> -->
		<div style="display: flex;">
		    <div>
				<el-button @click="newAddAmount" size="mini" type="primary">新增</el-button>
				<el-button  @click="checkOrder(2)"  
					size="mini" type="primary">删除</el-button>
				<el-button  @click="callPayPut"
					:loading="loading_btn"
					size="mini" type="primary">保存</el-button>
				<el-button  size="mini" @click="prevNext(1)" type="primary">上一条</el-button>
				<el-button   size="mini" @click="prevNext(2)" type="primary">下一条</el-button>
				<el-button   size="mini" @click="lodeList" type="primary">刷新</el-button>
			</div>
			<div style="margin-top: 2px;margin-left: 20px;">
				<el-checkbox v-model="isAdd" 
					v-if="order!='new'"
					border size="mini">保存后新增</el-checkbox>
			</div>
		</div>
		<br>
		<div class="searchForm" >
			<div >
			    单号： 
				<el-input size="small" v-model="order"
				placeholder="请输入单号" disabled
				style="width:150px;"></el-input>
			</div>
			<div>
			    制单日期： 
				<el-date-picker
				      size="small"
				      v-model="buyer_date"
					  value-format="yyyy-MM-dd"
				      type="date"
				      placeholder="选择日期时间">
				    </el-date-picker>
			</div>
			<div>
			    制单人： 
				<el-input size="small" v-model="buyer_person" 
				placeholder="请输入制单人"  
				style="width:150px;"></el-input>
			</div>
			
			<div>
			    总金额：
			    <el-input size="small" v-model="notPayTotal" 
				disabled
			    placeholder="请输入总金额"  
			    style="width:150px;"></el-input>
			</div>
		</div>
      <!--  <div class="searchForm">
            
        </div> -->
		<div style="display: flex;flex-wrap: wrap;">
			<div style="margin: 8px 0;">
				<!-- <el-button @click="allpay(1)"  size="mini" type="warning">{{ttype==1?'全付':"全收"}}</el-button>
				<el-button @click="allpay(2)" size="mini" type="warning">{{ttype==1?'全不付':"全不收"}}</el-button> -->
				<!-- <el-button @click="callPayPut(1)"  size="mini" type="warning">
					{{ttype==1?'结算勾选的未付款':"结算勾选的未收款"}}
				</el-button> -->
				<el-button @click="toggleInverseAllSelection"  
				size="mini" type="warning">反选</el-button>
				<el-button @click="delItems"
				size="mini" type="warning">删除</el-button>
			</div>
			<div style="margin: 8px 10px;">
			    账户： <el-select size="small" v-model="bank_account" placeholder="请选择">
						<el-option
						  v-for="item in backList"
						  :key="item.id"
						  :label="item.account_title"
						  :value="item.account_title">
						</el-option>
					  </el-select>
				<span @click="syncAccount"
				 class="spanColor">同步账户</span>	  
			</div>
			<div style="margin-right: 10px;margin-top: 8px;margin-bottom: 8px;">
				<div style="display: flex;" v-if="ttype==1">
					<div style="margin-top: 5px;">
						供应商：
					</div>
					<div>
						<selectCustomer :supp="search_form.supplier" @getCustomerName="getCustomerName" />
					</div>
				</div>
				<div style="display: flex;" v-if="ttype==2">
					<div style="margin-top: 5px;">
						客户：
					</div>
					<div>
						<selectCustomer 
						 holder="请输入客户名称"
						 :supp="search_form.customer" @getCustomerName="getCustomerName" />
					</div>
				</div>
			</div>
			
			<div style="margin: 8px 0;">
			    <el-button type="primary" size="mini" @click="searchBtn">检索</el-button>
			</div>
			<div style="margin-left: 20px;" v-if="info.id">
				{{info.name}} {{info.bank_name}} <br>
				{{info.account_number}}  <br>
				{{bank_account}} {{payTotal | toggleInt}}
				<span style="color: red;cursor: pointer;" @click="copyText">复制</span>
			</div>
		</div>
        <el-table  :data="list"  
		     ref="multipleTable"
			 border  
			 highlight-selection-row
			 @selection-change="handleSelectionChange"
			 @cell-click="cellClick"
			>
			<el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
			<!-- <el-table-column   align="center"
				:prop="ttype==1?'buyer_date':'buyer_date_wholesaler'" width="130px" 
				label="发生日期" />	 -->
			
			<el-table-column  align="center" width="90">
				<template slot="header" slot-scope="scope">
				    <div class="button_text" @click="sortBuyerDate()">
						发生日期
					</div>
				</template>
				<template slot-scope="scope">
				   <div>
					   {{scope.row.fs_date || scope.row.buyer_date}}
						<!-- <div v-if="ttype==1">
								{{scope.row.buyer_date}}
						</div>
						<div v-else>
								{{scope.row.buyer_date_wholesaler?scope.row.buyer_date_wholesaler:scope.row.buyer_date}}
						</div> -->
				   </div>
				</template>
			</el-table-column>
			
				
			<el-table-column   align="center"  width="100px" label="类型">
				<template slot-scope="scope">
				   <div v-if="ttype==1 && scope.row.id!='小计'">
						{{scope.row.code_arr || scope.row.code ?'货款':'预付'}}
				   </div>
				   <div v-if="ttype==2 && scope.row.id!='小计'">
				   		{{scope.row.code_arr || scope.row.code?'货款':'预收'}}		
						
				   </div>
				</template>
				
			</el-table-column>
			<el-table-column  align="center" width="80"   label="单据号">
				<template slot-scope="scope">
				  <div class="button_text"
						@click="toPutPayInfo(scope.row)"
						>
				  	{{$utils.sliceStr(scope.row.order_number,6)}}
				  </div>
				</template>
			</el-table-column>
             <el-table-column   align="center" prop="remark" label="摘要" />
            <el-table-column   align="center"  width="300px" prop="goods_name"  label="商品名称" />
			<el-table-column   align="center" prop="price" width="70"
				label="单价" />
			<el-table-column   align="center" prop="goods_number" width="60"
				label="数量" />
			<!-- <el-table-column   align="center"  prop="original_amount"  label="原始金额" /> -->
			<!-- <el-table-column   align="center"   :label="ttype==1?'未付金额':'未收金额'">
				<template slot-scope="scope">
				   <div v-if="scope.row.code">
						<span v-if="ttype==1">{{scope.row.residue_money}}</span>
						<span v-else>{{scope.row.residue_money_put}}</span>
				   </div>
				   <div v-else>
					   {{scope.row.residue_money}}
				   </div>
				</template>
			</el-table-column> -->
			<el-table-column   align="center"   :label="ttype==1?'本次付款':'本次收款'">
				<template slot-scope="scope">
				   <div>
					   <!-- {{scope.row.one_pay}} -->
						<el-input   size="mini" v-model="scope.row.one_pay" disabled></el-input>
						<!-- @input="changeOnePay(scope)" -->
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"   :label="ttype==1?'供应商':'客户'">
				<template slot-scope="scope">
				   <div>
						<span >{{scope.row.supplier || scope.row.customer}}</span>
						
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"  width="180px"   :label="ttype==1?'付款账号':'收款账号'">
				<template slot-scope="scope">
				   <div>
						<el-select size="mini" v-model="scope.row.bank_account" placeholder="请选择">
								<el-option
								  v-for="item in backList"
								  :key="item.id"
								  :label="item.account_title"
								  :value="item.account_title">
								</el-option>
						</el-select>
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"  width="180px"   label="备注">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.remarks"></el-input>
				   </div>
				</template>
			</el-table-column>
		  
        </el-table>
		<div style="display: flex;margin-top: 10px;">
		  <div style="margin-right: 10px;">
			  {{ttype==1?'未付合计：':'未收合计：'}}
		       <el-input size="small" v-model="notPayTotal" 
			   disabled
		      placeholder="请输入总金额"  
		      style="width:150px;"></el-input>  
		  </div>
		  <div>
		     
			  {{ttype==1?'付款合计：':'收款合计：'}}
		      <el-input size="small" v-model="payTotal" 
			  disabled
		      placeholder="请输入总金额"  
		      style="width:150px;"></el-input>
		  </div>
		  <div style="margin-left: 10px;">
		  	{{ttype==1?'本次勾选未付款金额：':"本次勾选未收款金额："}}
		  	<el-input size="small" v-model="checkAmount"
			disabled
		  	placeholder="请输入制单人"  
		  	style="width:150px;"></el-input>
		  </div>
		</div>
    </div>
</template>
<script>
	import selectCustomer from "@/components/selectCustomer"
	import mixin from './mixin.js'
    export default {
        components:{
			selectCustomer
        },
		mixins:[mixin],
		props:{
			ttype:{
				type:String,
				default:'1',
			}
		},
        data(){
            return {
				buyer_date:"",
				buyer_person:"",
				order_number:'',
				newList:[]
            }
        },
        mounted(){
			let order_number = this.$route.query.order_number
			if(order_number){
				this.order_number = order_number
				this.lodePayPutOrder(order_number)
			}
			
        },
        methods:{
			lodePayPutOrder(order_number){
				this.newList = []
				this.$post('/putpay/lodePayPutOrder',{order_number},res=>{
					let result = res.data.data
					this.list = result
					if(result.length){
						if(this.ttype==1){
							this.search_form.supplier = result[0].supplier
						}else{
							this.search_form.customer = result[0].customer
						}
						this.buyer_date = result[0].happen_date
					}
					for(let item of this.list){
						this.newList.push({
							one_pay:item.one_pay
						})
					}
					
				})
			},
			//新增
			newAddAmount(){
				this.$router.replace({
					path:this.$route.path,
					query:{
						
					}
				})
				this.list = []
				this.search_form.supplier = ''
				this.search_form.customer = ''
				this.order_number = ''
				let now = this.$utils.formatNowDate(2)
				this.buyer_date = now
			},
			//检查能否删除或者保存 1保存 2删除
			checkOrder(tt){
				if(!this.$route.query.order_number){
					if(tt==1){
						this.callPayPut()
					}else{
						this.delRow()
					}
				}else{
					let supplier
					if(this.ttype==1){
						supplier = this.list[0].supplier
					}else{
						supplier = this.list[0].customer
					}
					if(!supplier) return this.$message.error('单据异常，不能操作')
					let params = {
						type:this.ttype,
						order_number:this.$route.query.order_number,
						supplier:supplier
					}
					this.$post('/putpay/checkOrder',params,res=>{
						 let result = res.data
						 if(result.code==200){
							 if(tt==1){
							 	this.callPayPut()
							 }else{
							 	this.delRow()
							 }
						 }
					})
				}
			},
			//删除
			delRow(){
				if(!this.$route.query.order_number){
					this.newAddAmount()
				}else{
					let arr = []
								
					for(let item of this.list){
						let obj = {}
						for(let i in item){
							obj[i] = item[i]
						}
						arr.push(obj)
					}
					for(let i in arr){
						if(arr[i].one_pay!=this.newList[i].one_pay){
							return this.$message.error('删除单据时不能修改付款金额')
						}
					}
					
					this.$confirm('确定删除?', '提示', {
						  confirmButtonText: '确定',
						  cancelButtonText: '取消',
						  type: 'warning'
						}).then(() => {
						 this.$post('/putpay/delCallPutPay',this.list,res=>{
							 if(res.data.code==200){
								 this.newAddAmount()
							 }
						 })
						  
					})
				}
				
			},
			
			//保存
			callPayPut(){
				
				let order_number = this.$utils.generateRandomString(2)
				let arr = []
			
				for(let ele of this.list){
					let obj = {}
					for(let i in ele){
						obj[i] = ele[i]
					}
					arr.push(obj)
				}
				
				let errorMsg
				if(this.ttype==1){
					errorMsg = '请选择付款账号'
				}else{
					errorMsg = '请选择收款账号'
				}
				
				// let pay_ids = []
				// arr.map((item1)=>{
				// 	if(item1.code){
				// 		pay_ids.push(item1.id)
				// 	}
				// })
				
				for(let item of arr){
					item.is_settle = 1,
					item.is_settle_put = 1,
					item.ttype = this.ttype
					item.hander_person = sessionStorage.getItem('user_name')
					item.buyer_date = this.buyer_date
					item.prepared_by = sessionStorage.getItem('user_name')
				    item.order_number = order_number
					if(!item.bank_account) return this.$message.error(errorMsg)
					if(this.ttype==1){
						item.user_bank_name = this.info.bank_name
						item.user_account_number = this.info.account_number
					}else{
						item.user_bank_name = ''
						item.user_account_number = ''
					}
				}
			
				this.loading_btn = true
				if(!this.$route.query.order_number){
				
					this.$post('/putpay/callPutPay',arr,res=>{
						if(res.data.code == 200){
							this.$message.success('操作成功')
							if(this.isAdd){
								this.search_form.supplier = ''
								this.search_form.customer = ''
								this.list = []
							}
							
						}
						this.loading_btn = false
					})
				}else{
					this.$post('/putpay/callPutPayUpdate',arr,res=>{
						if(res.data.code == 200){
							this.$message.success('操作成功')
							if(this.isAdd){
								this.search_form.supplier = ''
								this.search_form.customer = ''
								this.list = []
							}
							
						}
						this.loading_btn = false
					})
				}
				
			},
            
        }
    }
</script>
<style>
	.infoData{
		margin: 5px 0;
	}
	.infoData>div{
		display: inline-block;
		padding: 5px;
	}
	.spanColor{
		color: red;cursor: pointer;margin-left: 5px;font-weight: 700;
	}
</style>
